<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2025/5/6 0006
  Time: 11:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: '微软雅黑';
            background: #f0f3f5;
            display: flex;
        }

        /* 左侧导航 */
        .sidebar {
            width: 200px;
            background: #e8f4ff; /* 修正为浅蓝色背景 */
            padding: 20px 0;
            height: 100vh;
        }
        .nav-item {
            padding: 14px 24px;
            cursor: pointer;
            color: #333;
            font-size: 14px;
            transition: background 0.3s;
        }
        .nav-item.active {
            background: #d1e7ff;
            color: #2a7de2;
            border-left: 4px solid #2a7de2;
        }

        /* 右侧内容区 */
        .main-content {
            flex: 1;
            padding: 24px;
            background: #fff;
        }

        /* 操作栏 */
        .action-bar {
            display: flex;
            gap: 12px;
            margin-bottom: 20px;
        }
        input {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 160px;
            font-size: 13px;
        }
        button {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 13px;
        }
        .btn-search {
            background: #1890ff;
            color: white;
        }
        .btn-new {
            background: #52c41a;
            color: white;
        }

        /* 表格样式 */
        table {
            width: 100%;
            border-collapse: collapse;
            background: white;
            border: 1px solid #e8e8e8;
            margin-top: 12px;
        }
        th, td {
            padding: 12px 16px;
            text-align: left;
            border-bottom: 1px solid #e8e8e8;
            font-size: 13px;
        }
        th {
            background: #fafafa;
            color: rgba(0,0,0,0.85);
        }
        .action-btns button {
            padding: 4px 8px;
            margin-right: 8px;
        }
        .btn-edit {
            background: #faad14;
            color: #fff;
        }
        .btn-del {
            background: #ff4d4f;
            color: #fff;
        }

        /* 分页提示 */
        .pagination {
            margin-top: 16px;
            color: #999;
            font-size: 13px;
        }
    </style>
</head>
<body>
<!-- 完全匹配图片的导航项 -->


<div class="main-content">
    <h3 style="margin-bottom:16px;color:rgba(0,0,0,0.85)">学生管理</h3>

    <div class="action-bar">
        <input placeholder="学生编号">
        <input placeholder="姓名">
        <button class="btn-search">查询</button>
        <button class="btn-new">新增</button>
        <button>导出</button>  <!-- 修正按钮文字 -->

    </div>

    <table>
        <thead>
        <tr>
            <th>学生编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <!-- 完全匹配数据内容 -->
        <tr>
            <td>S123456</td>
            <td>JacBGreen</td>  <!-- 保持图片中的拼写 -->
            <td>男</td>
            <td class="action-btns">
                <button class="btn-edit">修改</button>
                <button class="btn-del">删除</button>
            </td>
        </tr>
        <tr>
            <td>S123457</td>
            <td>MerySalla</td>
            <td>女</td>
            <td class="action-btns">
                <button class="btn-edit">修改</button>
                <button class="btn-del">删除</button>
            </td>
        </tr>
        </tbody>
    </table>

    <!-- 修改分页控件 -->
    <div class="pagination">
        <button id="prevPage" class="btn-prev" onclick="prevPage()">上一页</button>
        <span id="pageInfo">第1页/共1页</span>
        <span id="recordInfo">显示第1到第0条记录，总共0条记录</span>
        <button id="nextPage" class="btn-next" onclick="nextPage()">下一页</button>
    </div>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        // 分页变量
        let currentPage = 1;
        let totalPages = 1;
        let totalCount = 0;
        const pageSize = 5;

        // 查询函数
        function searchStudents() {
            const studentNumber = $('[placeholder="学生编号"]').val();
            const name = $('[placeholder="姓名"]').val();
            
            $.post('StudentController', {
                op: "search",
                studentNumber: studentNumber,
                name: name,
                page: currentPage,
                pageSize: pageSize
            }, function(response) {
                if (typeof response === 'string') {
                    response = JSON.parse(response);
                }
                
                // 更新分页信息
                currentPage = response.currentPage || 1;
                totalPages = response.totalPages || 1;
                totalCount = response.totalCount || 0;
                updatePaginationUI();
                
                // 渲染表格数据
                let html = "";
                if (response.data && response.data.length > 0) {
                    $.each(response.data, function(index, student) {
                        html += '<tr>' +
                            '<td>' + student.studentNumber + '</td>' +
                            '<td>' + student.name + '</td>' +
                            '<td>' + student.gender + '</td>' +
                            '<td class="action-btns">' +
                            '<button class="btn-edit" onclick="openEditModal(\'' + student.id + '\')">修改</button>' +
                            '<button class="btn-del" onclick="deleteStudent(\'' + student.id + '\')">删除</button>' +
                            '</td>' +
                            '</tr>';
                    });
                } else {
                    html = '<tr><td colspan="4" style="text-align:center;">暂无数据</td></tr>';
                }
                $("table tbody").html(html);
            });
        }

        // 更新分页UI
        function updatePaginationUI() {
            const startRecord = (currentPage - 1) * pageSize + 1;
            const endRecord = Math.min(currentPage * pageSize, totalCount);
            
            $("#pageInfo").text("第" + currentPage + "页/共" + totalPages + "页");
            $("#recordInfo").text("显示第" + startRecord + "到第" + endRecord + "条记录，总共" + totalCount + "条记录");
            $("#prevPage").prop("disabled", currentPage <= 1);
            $("#nextPage").prop("disabled", currentPage >= totalPages);
        }

        // 分页按钮函数
        function prevPage() {
            if (currentPage > 1) {
                currentPage--;
                searchStudents();
            }
        }

        function nextPage() {
            if (currentPage < totalPages) {
                currentPage++;
                searchStudents();
            }
        }

        // 页面加载时执行查询
        $(document).ready(function() {
            searchStudents();
        });
    </script>
</div>
</body>
</html>